@import "../lib_var.less";
// @modal-body-padding: 24px;
// @modal-header-bg: @component-background;
// @modal-header-border-color-split: @lineColor-split;
// @modal-content-bg: @component-background;
// @modal-heading-color: @heading-color;
// @modal-footer-bg: transparent;
// @modal-footer-border-color-split: @lineColor-split;
// @modal-footer-padding-vertical: 10px;
// @modal-footer-padding-horizontal: 16px;
// FIXME:THEME
// @modal-mask-bg: rgba(var(--black-rgb), 45%);// FIXME:THEME
//  FIXME:THEME
// @modal-mask-bg: var(--deepMaskColor);

// General global style: defined title and close icon style, eliminated modal content border
// Note: override antd style automatically. Please use the closeIcon parameter in the modal component to customize the close icon, instead of using antd's own close icon.
.ant-modal-close {
  height: 24px;
  width: 24px;
  margin: 24px 24px 0 0;

  &:focus-within {
    .ant-modal-close-x {
      &:hover {
        background: var(--black_300);
        box-shadow: 0 0 0 4px var(--black_300);
      }
    }
  }
}

.ant-modal-body {
  color: var(--fc1);
}

.ant-modal-confirm-title,
.ant-modal-confirm-content {
  color: var(--fc1) !important;
}

.ant-modal-close-x {
  height: 16px;
  width: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  &:hover {
    background: var(--fc11);
    box-shadow: 0 0 0 4px var(--fc11);
  }
}

.ant-modal-close-x svg {
  height: 16px;
  width: 16px;
  fill: var(--thirdLevelText);
}

.ant-modal-header {
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  padding-top: 24px;
  padding-bottom: 24px;
}

.ant-modal-title {
  color: var(--firstLevelText);
}

.ant-modal-content {
  border-radius: 8px;
  background-color: var(--bgCommonDefault);
  border:1px solid var(--borderCommonDefault);
  box-shadow:var(--shadowCommonHighest);
  background-clip: inherit;
}
.ant-modal-header {
  background-color: var(--bgCommonDefault);
}

.ant-modal-footer {
  border-top: none;
}

// Design on the draft width and height of 1170 * 768 modal box, adaptive style
// Notes: the width setting requires an in-line style to take effect, e.g. <Modal width={'90%'} style={{maxWidth: '1170px', minWidth: '600px'}} />
.lgModal(@minHeight: 600px) {
  .ant-modal-content {
    max-height: 768px;
    min-height: @minHeight;
    height: 85vh;
    border-radius: 8px;
  }
}